<template>
  <div class="content-wrap addFriend-wrap">
    <van-nav-bar title="密友" left-arrow @click-left="$router.go(-1)">
      <van-tabs v-model="activeType" slot="title" type="card" background="#2b2f41" color="#fff"
                title-active-color="#2b2f41" title-inactive-color="#fff">
        <van-tab title="添加密友"></van-tab>
        <van-tab title="添加密群"></van-tab>
      </van-tabs>
    </van-nav-bar>

    <div class="search-box">
      <van-cell-group v-if="activeType === 0">
        <van-field v-model="friendNum" placeholder="密聊号" clearable left-icon="search" type="search"
                   @keypress.enter.native="searchFriends"/>
      </van-cell-group>
      <van-cell-group v-else>
        <van-field v-model="groupNum" placeholder="密聊群号" clearable left-icon="search" type="search"
                   @blur="searchFriends"/>
      </van-cell-group>
    </div>

    <div class="qrcode-box">
      <user-msg-box :userMsg="$store.state.user.userData"></user-msg-box>

      <div id="qrcode"></div>

      <p class="desc-text">使用密聊扫一扫功能<br/>拍摄上面的二维码图案，加我密聊</p>
    </div>
  </div>
</template>

<script>
  import Socket from '../../utils/socket'
  import QRCode from 'qrcodejs2'

  export default {
    name: 'addFriend',
    data () {
      return {
        friendNum: '',
        groupNum: '',
        activeType: 0
      }
    },
    methods: {
      tabClick (index) {
      },
      qrcode () {
        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          text: location.origin + '/friendDetail/' + this.$store.state.user.userData.uid,
          render: 'table'
        })
        return qrcode
      },
      searchFriends () {
        if (this.activeType === 0) {
          Socket.sendData('searchFriends', { username: this.friendNum }).then(res => {
            if (res.action !== 20003) {
              return
            }
            if (!res.data) {
              this.$dialog.alert({
                message: '您输入的密聊号不正确'
              })
            } else {
              Socket.setStoreList('setDetail', { info: res.data, type: 'friendDetail' })
              this.$router.push({ name: 'friendDetail' })
            }
          })
        } else {
          Socket.sendData('searchGroup', { gid: this.groupNum })
        }
      }
    },
    mounted () {
      this.qrcode()
      // this.$router.push({ name: 'chat', params: { id: '82' } })
    }
  }
</script>

<style lang="scss">
  .addFriend-wrap {
    .search-box {
      margin: .4rem 0;
    }

    .qrcode-box {
      display: flex;
      flex-direction: column;
      margin: 0 .6rem;
      background: #fff;
      padding: .3rem;

      #qrcode {
        width: 100%;
        margin: .3rem 0;

        img {
          margin: 0 auto;
        }
      }

      .desc-text {
        color: #aaa;
        font-size: .24rem;
        text-align: center;
        line-height: 1.5;
        margin-top: .2rem;
      }
    }
  }
</style>
